<template>
    <div class="page-center text-list">
        <p class="text-center">优势项目（持续更新中......）</p>
        <ul>
            <li v-for="(item, index) in varieties" :key="index">{{ item }}</li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const varieties = ref([
    '左乙拉西坦',
    '西替利嗪',
    '特地唑胺',
    '咪唑斯汀',
    '卡博替尼',
    '达沙替尼',
    '艾司洛尔',
    '左西孟旦',
    '西他列汀',
    '特布他林',
    '美托洛尔',
    '甲氧苄啶',
    '达普司他',
    '阿昔替尼',
    '左卡尼汀',
    '西司他汀',
    '他达那非',
    '美洛昔康',
    '巴酮可可碱',
    '布替萘芬',
    '阿立呱唑',
    '左布比卡因',
    '西地那非',
    '舒尼替尼',
    '氯雷他定',
    '格列齐特',
    '布洛芬',
    '阿戈美拉汀',
    '右美沙芬',
    '芫地溴铵',
    '沙丁胺醇',
    '罗脉卡因',
    '格列吡嗪',
    '丙胺卡因',
    '阿伐曲泊帕',
    '吗啡菁绿',
    '奥扎格雷',
    '瑞加德松',
    '卢帕他定',
    '格拉司琼',
    '吡非尼酮',
    '阿伐那非',
    '吗达帕胺',
    '乌拉地尔',
    '瑞戈非尼',
    '利扎曲普坦',
    '鲑塞酸二钠',
    '吡贝地尔',
    '阿苯达唑',
    '异烟酰胺',
    '沃替西汀',
    '屈他维林',
    '利奈唑胺',
    '鲑布醇',
    '比索洛尔',
    '地塞米松',
])
</script>

<style lang="scss" scoped>
.text-list {
    margin-bottom: 20px;
    ul {
        list-style: none;
        padding: 0;
        margin: 0;

        &::after {
            content: '';
            display: block;
            clear: both;
        }

        li {
            float: left;
            width: 14.285714%;
            padding: 10px;
            box-sizing: border-box;
            text-align: center;
            color: #666;
            font-size: 14px;
            line-height: 1.5;

            &:hover {
                color: #333;
                background-color: #f5f5f5;
            }
        }
    }
}

@media screen and (max-width: 1200px) {
    .text-list ul li {
        width: calc(100% / 6); // 6列
    }
}

@media screen and (max-width: 992px) {
    .text-list ul li {
        width: calc(100% / 5); // 5列
    }
}

@media screen and (max-width: 768px) {
    .text-list ul li {
        width: calc(100% / 4); // 4列
    }
}

@media screen and (max-width: 576px) {
    .text-list ul li {
        width: calc(100% / 3); // 3列
    }
}

@media screen and (max-width: 375px) {
    .text-list ul li {
        width: calc(100% / 2); // 2列
    }
}
</style>
